<template>
    <div style="margin-left: 30px; margin-top: 20px;">
        <head-top></head-top>
        <el-form ref="trains" :model="trains" :rules="rules" label-width="100px" class="demo-ruleForm" style="margin-left: 20%; padding-top: 40px;">
            <el-form-item label="所属分类" prop="region">
                <el-select v-model="trains.region" placeholder="请选择分类">
                    <el-option label="疫情防控培训" value="1"></el-option>
                    <el-option label="餐饮安全培训" value="2"></el-option>
                    <el-option label="岗前培训" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="培训内容" prop="content">
                <el-input v-model="trains.content" style="width: 40%;"></el-input>
            </el-form-item>
            <el-form-item label="应培训时长" prop="time">
                <el-input v-model="trains.time"  style="width: 22%;" placeholder="分钟"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="url">
                <el-input v-model="trains.url"  style="width: 40%;"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="comment">
                <el-input v-model="trains.comment"  style="width: 40%;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('trains')">立即创建</el-button>
                <el-button @click="resetForm('trains')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import { addTrains } from '../api/post'
    export default {
        data() {
            return {
                trains: {
                    content: "",
                    comment: "",
                    time: "",
                    region: "",
                    url: ""
                },
                rules: {
                    comment: [
                        { max: 100, message: '不能超过100个字符', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入培训内容', trigger: 'blur' },
                        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                    ],
                    url: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' },
                        { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
                    ],
                    time: [
                        { required: true, message: '请输入应培训时长' }
                    ],
                    region: [
                        { required: true, message: '请选择所属分类' }
                    ]
                }
            };
        },

        components: {
            headTop,
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) =>
                {
                    if(valid){
                        //验证通过
                        const params = {
                            url: this.trains.url,
                            content: this.trains.content,
                            remark: this.trains.comment,
                            trainingTime: this.trains.time,
                            classId: this.trains.region
                        };
                    //const addTrains1 = addTrains(params);
                        const addTrains1 = addTrains({
                            url: this.trains.url,
                            content: this.trains.content,
                            remark: this.trains.comment,
                            trainingTime: this.trains.time,
                            classId: this.trains.region
                        });
                        console.log(addTrains1)
                        if(addTrains1.code === 200) {
                            //成功了
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                        }else{
                            this.$message.error('添加失败，请重新尝试。');
                        }
                    } else {
                        //验证不通过
                        this.$notify.error({
                            title: '错误',
                            message: '请检查输入是否正确',
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
            this.$refs[formName].resetFields();
        }
        }
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .button_submit{
        text-align: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
</style>

